<template>
	<view class="panel-list">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="panel-box" v-for="n in actiList" :key="n.id" @tap="goDetails(n)">
				<view class="image">
					<image class="image" :src="n.homeImg"></image>
				</view>
				<view class="panel-right">
					<view style="min-height: 80rpx;">
						<u--text bold color="#0F0F0F" lineHeight="40rpx" size="32rpx" :lines="2"
							:text="`活动场地【${n.businessName}】${n.title}`"></u--text>
					</view>
					<view class="f-s-c">
						<u-icon color="#575B66" name="clock" size="24"></u-icon>
						<u--text :lines="1" color="#575B66" size="24rpx"
							:text="`营业时间 ${n.startTime}-${n.endTime}`"></u--text>
					</view>
					<view class="f-s-c">
						<u-icon color="#575B66" name="map" size="24"></u-icon>
						<u--text :lines="1" color="#575B66" size="24rpx" :text="n.address"></u--text>
						<text class="distance" v-if="n.distance">{{n.distance}}km</text>
					</view>
					<view class="money" v-if="n.amount">
						<view class="money-left">
							<text class="symbol">￥</text>
							<text>{{n.amount}}元/位</text>
						</view>
						<view class="reserve">立即预订</view>
					</view>
				</view>
			</view>
			
			<noData v-if="actiList.length < 1"></noData>
			
			<uni-load-more  v-if="actiList.length > 0" :status="loadingType"></uni-load-more>
			
			<!-- 占位元素 -->
			<view style="height: 136rpx;"></view>
			
		</scroll-view>
	</view>
</template>

<script>
	import {
		activiList, //活动列表
	} from '@/api/cityParty.js'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		name: 'panelList',
		data() {
			return {
				actiList: [],
				scrollTop: 0,
				type: null,
				keywords: '',
				old: {
					scrollTop: 0
				},
				queryState: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					isQuery: true,
				},
				loadingData: false, // 添加一个变量来跟踪是否正在加载数据
				loadedIds: new Set(),
				hasMoreData: true ,// 添加一个变量来跟踪是否还有更多数据可供加载
				
				loadingType: 'loading', // 是否显示更多
			}
		},
		computed: {
			...mapGetters(['locationInfo', 'userInfo']),
		},
		watch: {
			'locationInfo.cityCode'(n, o) {
				this.actiList = [];
				this.loadedIds.clear()
				this.scrollTop = 0;
				this.hasMoreData = true;
				
				this.loadingType = 'loading'
				
				this.$nextTick(() => {
					this.getCativilist();
				})
			}
		},
		mounted() {
			this.getCativilist()
		},
		methods: {
			
			/**
			 * 切换tabs执行方法
			 */
			handleRest() {
				this.queryState.pageNum = 1
				this.loadingType = 'loading'
				this.getCativilist()
			},
			goDetails(val) {
				
				uni.navigateTo({
					url: "/pages/cityParty/detail?id=" + val.id
				})
			},
			upper: function(e) {
				console.log('这是伽马的');
				console.log(e)
			},
			
			/**
			 * 触底执行方法
			 */
			lower: function(e) {
				console.log('触底');
				if (this.queryState.isQuery && !this.loadingData && this.hasMoreData) {
					// 设置 loadingData 为 true，表示正在加载数据
					this.loadingData = true;

					// 加载更多数据，通常是调用接口获取下一页数据
					this.queryState.pageNum++;
					this.getCativilist();
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			
			
			// 在加载更多数据时，只处理未加载过的数据项
			async getCativilist() {
				try {
					uni.showLoading({
						title: '正在加载中'
					});
					const {
						pageNum,
						pageSize,
					} = this.queryState
					let {
						userLng,
						userLat,
						cityCode
					} = this.locationInfo
					cityCode = cityCode || null
					const params = {
						pageNum,
						pageSize,
						cityCode,
						type: this.type === 'all' ? null : this.type,
						keywords: this.keywords,
						userLng,
						userLat,
					}
					this.$public.showLoading(true)
					let res = await activiList(params);
					this.$public.showLoading(false)
					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg || '请求失败'
						})
						return
					} else {
						if (res.rows.length > 0) {
							// 过滤出未加载过的数据项
							const newData = res.rows.filter(item => !this.loadedIds.has(item.id));

							if (newData.length > 0) {
								// 将新数据追加到已有数据列表
								this.actiList = this.actiList.concat(newData);

								// 将新数据的标识符添加到 Set 中
								newData.forEach(item => this.loadedIds.add(item.id));
							}

							this.queryState.isQuery = true;
						} else {
							// 没有更多数据可加载，设置 hasMoreData 为 false
							this.hasMoreData = false;
							this.queryState.isQuery = false;
							
							if(getCurrentPages()[0].route === 'pages/cityParty/index'){
								uni.showToast({
									duration: 2000,
									icon: 'none',
									title: '没有更多活动数据可加载'
								})
							}

							
							this.loadingType = 'noMore'
						}
					}
				} catch (error) {
					// 处理请求失败的情况
					console.error("获取活动数据时出错:", error);
				} finally {
					uni.hideLoading();
					this.loadingData = false
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.distance {
		color: #575B66;
		font-size: 24rpx;
	}

	.f-s-c {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 8rpx;
	}

	.panel-list {
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
	}

	.panel-box {
		margin: 0 32rpx 24rpx 32rpx;
		border-radius: 16rpx;
		height: 224rpx;
		background-color: #ffffff;
		padding: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 16rpx;
		font-family: Source Han Sans CN;

		.panel-right {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			gap: 12rpx;
		}

		.money {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: space-between;
			align-self: flex-end;
		}

		.money-left {
			color: #F33030;
			font-weight: 500;
			font-size: 24rpx;

			.symbol {
				font-weight: 400;
				font-size: 20rpx;
			}
		}

		.reserve {
			padding: 10rpx 16rpx;
			width: 96rpx;
			height: 24rpx;
			border-radius: 64rpx;
			background: linear-gradient(180deg, #E27C8A -3%, #EC606F 100%);
			font-size: 24rpx;
			font-weight: 350;
			line-height: 24rpx;
			text-align: center;
			letter-spacing: 0rpx;
			color: #FFFFFF;
		}

		.image {
			width: 224rpx;
			height: 224rpx;
			border-radius: 16rpx;
		}
	}
</style>

<style lang="scss">
	/deep/ .uni-scroll-view {
		display: block;
		width: 100%;
		height: 85vh;
	}

	/deep/ uni-app {
		background-color: #ece7e791 !important;
	}
	
	/deep/ .no-data-box{
		
		&::after{
			height: 0;
		}
		
		&::before{
			height: 200rpx
		}
	}
</style>
